<template>
  <div class="box">
     
    <div
      class="singlist"
      v-for="item in artists"
      :key="item.id"
      @click="toMusicIndex(item.id)"
    >
      <span><img :src="item.picUrl + '?param=120y120'" alt="" /></span>
      <span>
        <h4 v-text="item.name"></h4>
        <p v-show="item.alias.length > 0">
          {{ item.name }} - {{ item.alias[0] }}
        </p>
        <p v-show="item.alias == ''">{{ item.name }}</p>
      </span>
    </div>
  </div>
</template>

<script>
import { GetTopArtistsAPI } from "@/api/api.js";
export default {
  name: "MusicEurope",

  data() {
    return {
      artists: [],
    };
  },

  mounted() {
    GetTopArtistsAPI({ limit: 100, type: 1, area: 96 }).then((res) => {
      this.artists = res.data.artists;
    });
  },

  methods: {
    top(){
        scrollTo(0, 0);
    },
    toMusicIndex(id) {
      this.$router.push({
        path: "/MusicIndex",
        query: { id },
      });
    },
  },
};
</script>

<style lang="less" scoped>

.box {
  .singlist {
     background-color: #fafafa;
    display: flex;
    margin: .9375rem;
    span:nth-child(1) {
      width: 3.125rem;
      height: 3.125rem;
      img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
      }
    }
    span:nth-child(2) {
      flex: 1;
      color: #fff;
      text-align: left;
      padding-left: .9375rem;
      h4 {
        font-size: 1rem;
        line-height: 1.5625rem;
        color: #333;
      }
      p {
        font-size: .75rem;
        line-height: 1.5625rem;
        color: #bbb;
      }
    }
  }
}
</style>